import styled from '@emotion/styled';
import React, { useEffect } from 'react';
import { IBusinessStatus, useBusiness } from '../Context/BusinessContext';

const TimerContanier = styled.div`
	width: 96px;
	height: 30px;
	background: #f93341;
	border-radius: 15px;
	position: absolute;
	right: 38px;
	z-index: 99;
	top: 76px;
`;

const TimerContent = styled.div`
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 6px 12px;
`;

const TimerIcon = styled.span`
	display: inline-block;
	min-width: 10px;
	min-height: 10px;
	background: #ffffff;
	border-radius: 2px;
`;

const Timer = styled.p`
	font-size: 13px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	margin-left: 10px;
`;

const index = () => {
	useEffect(() => {
		start();
	}, []);

	const start = () => {
		let int: number | NodeJS.Timer | undefined;
		let hour: number, minute: number, second: number; //时 分 秒
		hour = minute = second = 0; //初始化
		let millisecond = 0; //毫秒
		let time: any = document.getElementById('timetext');
		if (int) {
			clearInterval(int);
		} else {
			int = setInterval(() => {
				//计时
				millisecond += 50;
				if (millisecond >= 1000) {
					millisecond = 0;
					second = second + 1;
				}
				if (second >= 60) {
					second = 0;
					minute = minute + 1;
				}

				if (minute >= 60) {
					minute = 0;
					hour = hour + 1;
				}

				if (time) {
					time.innerHTML = toDub(hour) + ':' + toDub(minute) + ':' + toDub(second);
				}
			}, 50);
		}
	};

	//补零
	const toDub = (n: string | number) => {
		return n < 10 ? '0' + n : '' + n;
	};
	return (
		<TimerContanier>
			<TimerContent>
				<TimerIcon></TimerIcon>
				<Timer id="timetext"></Timer>
			</TimerContent>
		</TimerContanier>
	);
};

export default index;
